<script type="text/javascript">
	var cancelRefresh = false;
	var tabActive =0;
	
	$(function(){
		$("#tabs").tabs({
			activate: function( event, ui ) {
				var active = $( "#tabs" ).tabs( "option", "active" );
				tabActive = active;
				switch(active){
					case 0:
						requeryOutstanding();
						break;
					case 1:
						requerySettled();
						break;
					default:
						break;
				}
					
			}
		});
		requeryOutstanding();
	});

	function addInvoice(){
		var url="index.php?r=keuangan/tu/studentInvoice/invoiceForm&op=add";
		var winName = "Form Invoice";
		var specs ="menubar=0,scrollbars=1,status=0,titlebar=0,toolbar=0";
		var width=900,height=500;
		var replace = false,onCenter = true;
		var w = openWindow(winName,url,width,height,onCenter,specs,replace);
		w.focus();
		var timer = setInterval(function() {   
			if(w.closed) {  
				clearInterval(timer); 
				requeryOutstanding();
			}  
		}, 1000);
	}
	function openCreditNote(id){
		var url="index.php?r=keuangan/tu/studentInvoice/cnForm&id=" + id;
		var winName = "Form Credit Notes";
		var specs ="menubar=0,scrollbars=1,status=0,titlebar=0,toolbar=0";
		var width=900,height=500;
		var replace = false,onCenter = true;
		var w = openWindow(winName,url,width,height,onCenter,specs,replace);
		w.focus();
		var timer = setInterval(function() {   
			if(w.closed) {  
				clearInterval(timer); 
				switch(tabActive){
					case 0:
						requeryOutstanding();
						break;
					case 1:
						requerySettled();
						break;
					default:
						break;
				}
			}  
		}, 1000);
	}
		
	function editRow(id){
		var url="index.php?r=keuangan/tu/studentInvoice/invoiceForm&op=edit&id="+id;
		var winName = "Form Invoice";
		var specs ="menubar=0,scrollbars=1,status=0,titlebar=0,toolbar=0";
		var width=900,height=500;
		var replace = false,onCenter = true;
		var w = openWindow(winName,url,width,height,onCenter,specs,replace);
		w.focus();
		var timer = setInterval(function() {   
			if(w.closed) {  
				clearInterval(timer); 
				requeryOutstanding();				
			}  
		}, 1000);
		
	}
	
	function deleteRow(id){
		var data = $("#tblOut").jqGrid("getRowData",id);
		if (confirm("Delete data " + data.invoice_no + "?" )){			
			window.parent.showLoader();						
			var editUrl = "index.php?r=keuangan/tu/studentInvoice/edit";			
			$.ajax({	
				url : editUrl,
				type:"GET",
				async:true,
				data: {op: "delete",id:data.id},
				success: function(data) {
					if(data.actionStatus == 0){						
						$("#tblOut").jqGrid("delRowData",id);
					}
					if (data.actionMessage != ""){
						alert(data.actionMessage);
					} 
					if(data.actionError != "") {
						printConsole(data.actionError);
					}						
				},
				complete:function(){
					window.parent.hideLoader();
				}
			});
		}
	}
	function addPayment(id){
		
		var url="index.php?r=keuangan/tu/studentPayment/form&op=add&department_id=" + $("#department_id").val() + "&invoice_id=" + id;
		var winName = "Form Payment";
		var specs ="menubar=0,scrollbars=1,status=0,titlebar=0,toolbar=0";
		var width=900,height=500;
		var replace = false,onCenter = true;
		var w = openWindow(winName,url,width,height,onCenter,specs,replace);
		w.focus();
		var timer = setInterval(function() {   
			if(w.closed) {  
				clearInterval(timer); 
				requeryGrid();
			}  
		}, 1000);
	}
	
	function printInvoice(id){
		var url="index.php?r=keuangan/tu/studentInvoice/printInvoice&id="+id;
		var winName = "Payment Receipt";
		var specs ="menubar=0,scrollbars=1,status=0,titlebar=0,toolbar=0";
		var width=900,height=500;
		var replace = false,onCenter = true;
		var w = openWindow(winName,url,width,height,onCenter,specs,replace);
		w.focus();
	}

	function requeryGrid(){
		var active = $( "#tabs" ).tabs( "option", "active" );
		switch(active){
			case 0:
				requeryOutstanding();
				break;
			case 1:
				requerySettled();
				break;
			default:
				break;
		}
	}
	
	function requeryOutstanding(){
		if(cancelRefresh){
			cancelRefresh = false;
			return;
		}
		
		$("#tblOut").jqGrid("GridUnload");
		
		$("#tblOut").jqGrid({
			url:'index.php?r=keuangan/tu/studentInvoice/outstandingDetailList',
			//editUrl:'index.php?r=akademik/pendaftaran_kelas/kelas_tahun_ajaran/edit',
			postData:{"department_id":$("#department_id").val()},
			datatype: 'json',
			loadonce:true,
			mtype:"GET",
			autowidth:true,
			height:"100%",
			altRows:true,
			ignoreCase:true,
			colNames: ['id','SID','Name','Invoice no','Bulk no','Date','Invoice','Disc','Total','Paid','CN','Type', 'Keterangan', 'Status','Action'],
			colModel: [
				{name: 'id', index: 'id', width: 20,hidden:false,sorttype:'int',formatter:'int'},
				{name: 'sid', index: 'sid', width: 40,search:true},
				{name: 'student_name', index: 'student_name',search:true},
				{name: 'invoice_no', index: 'invoice_no', width: 50,search:true},
				{name: 'bulk_no', index: 'bulk_no', width: 50,search:true},
				{name: 'invoice_date', index: 'invoice_date', width: 40,template:dateTemplate},
				{name: 'total_invoice', index: 'total_invoice', width: 40,template:moneyTemplate},
				{name: 'disc', index: 'disc', width: 40,template:moneyTemplate},
				{name: 'total', index: 'total', width: 40,template:moneyTemplate},
				{name: 'total_paid', index: 'total_paid', width: 40,template:moneyTemplate},
				{name: 'total_cn', index: 'total_cn', width: 40,template:moneyTemplate},
				{name: 'invoice_type', index: 'invoice_type',hidden:false,width:40},								
				{name: 'notes', index: 'notes', formatter: 'textarea',width:100},								
				{name: 'is_active', index: 'is_active', width: 30, align: 'center', formatter: 'checkbox'},
				{name: 'act', index: 'act', width: 80, align: 'center'},				
			],
			gridview: true,
			rownumbers: false,
			rowNum: 10,
			rowList: [5, 10, 15],
			pager: '#navTblOut',
			viewrecords: true,
			caption: 'Department',
			jsonReader : { 
				root:"model",
				repeatitems: false			
			},
			loadComplete:function(data){
				console.log(data);
			},
			gridComplete: function(){ 
				var ids = jQuery("#tblOut").getDataIDs(); 
				for(var i=0;i<ids.length;i++){ 
					var cl = ids[i]; 
					//btnEdit = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>"; 
					//btnDelete = "<input style='height:20px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />"; 
					btnEdit = "<img title='Edit' class='imgBtn' style='height:20px;width:20px;' src='images/action/Actions-Edit-icon.png' onclick='editRow(" + cl + ")' />"; 
					btnDelete = "<img title='Delete' class='imgBtn' style='margin-left:5px;height:20px;width:20px;' src='images/action/Actions-Delete-icon.png' onclick='deleteRow(" + cl + ")' />";
					btnPaid = "<img title='Payment' class='imgBtn' style='margin-left:5px;height:20px;width:20px;' src='images/action/payment-icon.png' onclick='addPayment(" + cl + ")' />";
					btnPrint = "<img title='Print' class='imgBtn' style='margin-left:5px;height:20px;width:20px;' src='images/action/Actions-document-print-icon.png' onclick='printInvoice(" + cl + ")' />";
					btnCC = "<img title='Credit Notes' class='imgBtn' style='margin-left:5px;height:20px;width:20px;' src='images/action/credit-note.png' onclick='openCreditNote(" + cl + ")' />";			 
					jQuery("#tblOut").setRowData(ids[i],{act:btnEdit+btnPaid+btnPrint+btnDelete+btnCC}) 
				} 
			}
		});
		$("#tblOut").jqGrid('navGrid','#navTblOut',{add:false,edit:false,search:false,del:false,refresh:false});
		
		//add search text
		$("#tblOut").jqGrid('addSearchText',["sid","student_name","invoice_no","bulk_no","notes"]);

	}
	
	function requerySettled(){
		$("#tblPaid").jqGrid("GridUnload");
		
		$("#tblPaid").jqGrid({
			url:'index.php?r=keuangan/tu/studentInvoice/settledDetailList',
			//editUrl:'index.php?r=akademik/pendaftaran_kelas/kelas_tahun_ajaran/edit',
			postData:{"department_id":$("#department_id").val(),"start_date":$("#start_date").val(),"end_date":$("#end_date").val()},
			datatype: 'json',
			loadonce:true,
			mtype:"GET",
			autowidth:true,
			height:"100%",
			altRows:true,
			ignoreCase:true,
			colNames: ['id','SID','Name','Invoice no','Bulk no','Date','Total','Paid','Credit Note','Type', 'Keterangan','Action'],
			colModel: [
				{name: 'id', index: 'id', width: 20,hidden:false,sorttype:'int',formatter:'int'},
				{name: 'sid', index: 'sid', width: 40,search:true},
				{name: 'student_name', index: 'student_name',search:true},
				{name: 'invoice_no', index: 'invoice_no', width: 50,search:true},
				{name: 'bulk_no', index: 'bulk_no', width: 50,search:true},
				{name: 'invoice_date', index: 'invoice_date', width: 40,template:dateTemplate},
				{name: 'total', index: 'total', width: 40,template:moneyTemplate},
				{name: 'paid', index: 'paid', width: 40,template:moneyTemplate},
				{name: 'cn', index: 'cn', width: 40,template:moneyTemplate},
				{name: 'invoice_type', index: 'invoice_type',width:40},								
				{name: 'notes', index: 'notes', formatter: 'textarea',width:100},
				{name: 'act', index: 'act', width: 60, align: 'center'},
			],
			gridview: true,
			rownumbers: false,
			rowNum: 10,
			rowList: [5, 10, 15],
			pager: '#navTblPaid',
			viewrecords: true,
			caption: 'Department',
			jsonReader : { 
				root:"model",
				repeatitems: false			
			},
			loadComplete:function(data){
				console.log(data);
			},
			gridComplete: function(){ 
				var ids = jQuery("#tblPaid").getDataIDs(); 
				for(var i=0;i<ids.length;i++){ 
					var cl = ids[i]; 
					//btnEdit = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>"; 
					//btnDelete = "<input style='height:20px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />"; 
					btnCC = "<img title='Credit Notes' class='imgBtn' style='margin-left:5px;height:20px;width:20px;' src='images/action/credit-note.png' onclick='openCreditNote(" + cl + ")' />";
					btnPrint = "<img title='Print' class='imgBtn' style='margin-left:5px;height:20px;width:20px;' src='images/action/Actions-document-print-icon.png' onclick='printInvoice(" + cl + ")' />";										 
					jQuery("#tblPaid").setRowData(ids[i],{act:btnCC+btnPrint}) 
				} 
			}
		});
		$("#tblPaid").jqGrid('navGrid','#navTblPaid',{add:false,edit:false,search:false,del:false,refresh:false});
		
		//add search text
		$("#tblPaid").jqGrid('addSearchText',["sid","student_name","invoice_no","bulk_no","notes"]);
	}
</script>
<div>
	<div>
		<label class="form" style="text-align:right;width:70px" >Departemen :</label>
		<select id="department_id" name="department_id" onChange="requeryGrid()">
			<?php
				foreach ($arrDepartment as $dept){
					echo "<option value='".$dept->id."'>".$dept->name."</option>";
				} 
			?>
			
		</select>
	</div>
		
	<div style="clear:both"></div>	
	
	<div id="tabs" style="margin-top:10px">
		<ul>
			<li><a href="#outstanding">Outstanding</a></li>
			<li><a href="#paid">settled</a></li>
		</ul>
		<div id="outstanding">
			<div style="float:rigth">	
			<?php 
				$this->widget('application.components.widgets.ActionBar', 
					array("menuAlign" => "right", 
						'items' => array(
							array(
								'id' => "btnRefresh",
								'title' => Yii::t("menu","Segarkan"),
								'icon' => "images/action/Action-Refresh-icon.png",
								'callback'=>"requeryOutstanding"
							),		
							array(
									'id' => "btnAdd",
									'title' => Yii::t("menu","Add"),
									'icon' => "images/action/Actions-list-add-icon.png",
									'callback'=>"addInvoice"
							),								
							array(
								'id' => "btnPrint",
								'title' => Yii::t("menu","Cetak"),
								'icon' => "images/action/Actions-document-print-icon2.png",
								'callback'=>"printData"
							),					
							
						)
					)
				);
			?>
			</div>
			<table id="tblOut"></table>
			<div id="navTblOut"></div>
		</div>
		<div id="paid">
			<div>
				<label class="form" style="text-align:left;width:50px" >Start :</label>
				<?php
					$this->widget('application.components.widgets.DateTextField', array('name'=>'start_date','value'=>"01-".date("M-Y"),'htmlOptions'=>'onChange="requerySettled()"'));
				?>
				<label class="form" style="text-align:right;width:20px" >to </label>
				<?php
					$this->widget('application.components.widgets.DateTextField', array('name'=>'end_date','value'=>date("d-M-Y"),'htmlOptions'=>'onChange="requerySettled()"'));
				?>
			</div>
			<table id="tblPaid"></table>
			<div id="navTblPaid"></div>
		</div>		
	</div>
</div>